Event Input

Como gestionar los eventos de entrada (raton,teclado...etc) sobre las etiquetas del html.

Codigo de Ejemplo

Para utilizar los eventos simplemente tenemos que indicar el evento que queremos asociar a la etiqueta entre parentesis como un atributo de la etiqueta y asociarle una funcion (la funcion debe de ir entre comillas ""):

<p (click)="increaseInput()">{{name}}: {{numberOfInputs}}</p>

En este caso asociamos el evento (click) con la funcion increaseInput de manera que cada vez que hagamos click en la etiqueta <p> se lanzará dicha funcion

NOTA: La función tiene que estar colocada dentro del mismo componente (en el archivo .ts), si queremos llamar a una funcion de un componente padre podemos hacerlo como se explica aqui.

Otro ejemplo sería este:

<input type="text" (keydown)="increaseInput()">

En este caso asociamos el evento (keydown) a la misma funcion de antes increaseInput, en este caso al pulsar una tecla dentro de ese input se lanzará la funcion

Lista de eventos

Algunos de los eventos mas utilizados son:

• click
• dblclick
• keydown
• keypress
• keyup
• mouseenter
• mouseleave

Podemos ver la lista de eventos completa en el siguiente archivo

{Carpeta del proyecto}/node_modules/typescript/lib/lib.dom.d.ts

Dentro del objeto GlobalEventHandlersEventMap

En la version 13.1.2 de Angular los eventos son estos:

interface GlobalEventHandlersEventMap {
    "abort": UIEvent;
    "animationcancel": AnimationEvent;
    "animationend": AnimationEvent;
    "animationiteration": AnimationEvent;
    "animationstart": AnimationEvent;
    "auxclick": MouseEvent;
    "beforeinput": InputEvent;
    "blur": FocusEvent;
    "canplay": Event;
    "canplaythrough": Event;
    "change": Event;
    "click": MouseEvent;
    "close": Event;
    "compositionend": CompositionEvent;
    "compositionstart": CompositionEvent;
    "compositionupdate": CompositionEvent;
    "contextmenu": MouseEvent;
    "cuechange": Event;
    "dblclick": MouseEvent;
    "drag": DragEvent;
    "dragend": DragEvent;
    "dragenter": DragEvent;
    "dragleave": DragEvent;
    "dragover": DragEvent;
    "dragstart": DragEvent;
    "drop": DragEvent;
    "durationchange": Event;
    "emptied": Event;
    "ended": Event;
    "error": ErrorEvent;
    "focus": FocusEvent;
    "focusin": FocusEvent;
    "focusout": FocusEvent;
    "formdata": FormDataEvent;
    "gotpointercapture": PointerEvent;
    "input": Event;
    "invalid": Event;
    "keydown": KeyboardEvent;
    "keypress": KeyboardEvent;
    "keyup": KeyboardEvent;
    "load": Event;
    "loadeddata": Event;
    "loadedmetadata": Event;
    "loadstart": Event;
    "lostpointercapture": PointerEvent;
    "mousedown": MouseEvent;
    "mouseenter": MouseEvent;
    "mouseleave": MouseEvent;
    "mousemove": MouseEvent;
    "mouseout": MouseEvent;
    "mouseover": MouseEvent;
    "mouseup": MouseEvent;
    "pause": Event;
    "play": Event;
    "playing": Event;
    "pointercancel": PointerEvent;
    "pointerdown": PointerEvent;
    "pointerenter": PointerEvent;
    "pointerleave": PointerEvent;
    "pointermove": PointerEvent;
    "pointerout": PointerEvent;
    "pointerover": PointerEvent;
    "pointerup": PointerEvent;
    "progress": ProgressEvent;
    "ratechange": Event;
    "reset": Event;
    "resize": UIEvent;
    "scroll": Event;
    "securitypolicyviolation": SecurityPolicyViolationEvent;
    "seeked": Event;
    "seeking": Event;
    "select": Event;
    "selectionchange": Event;
    "selectstart": Event;
    "stalled": Event;
    "submit": SubmitEvent;
    "suspend": Event;
    "timeupdate": Event;
    "toggle": Event;
    "touchcancel": TouchEvent;
    "touchend": TouchEvent;
    "touchmove": TouchEvent;
    "touchstart": TouchEvent;
    "transitioncancel": TransitionEvent;
    "transitionend": TransitionEvent;
    "transitionrun": TransitionEvent;
    "transitionstart": TransitionEvent;
    "volumechange": Event;
    "waiting": Event;
    "webkitanimationend": Event;
    "webkitanimationiteration": Event;
    "webkitanimationstart": Event;
    "webkittransitionend": Event;
    "wheel": WheelEvent;
}

Angular | DOM | Viewchild